<template>
   <div class="chub_list">
      <navbar>{{title}}</navbar>
      <div class="content">
        <Slide-bar :height="heights"  :canDrag="isDrag" :items="tabList" :flex="flex" :index="tabIndex" @on-change="change">
          <div :slot="`slot-item-${k}`" v-for="(i,k) in tabList">
            <PullDown  :height="heights" :load-more="loadMore" :refresh="refresh"  ref="pulldown">
              <div slot="content" style="background-color: #ffffff;height: 100%">
                <div class="noList" v-if="tabList[tabIndex].noList">没有相关内容。。。</div>
                <div class="chubList" >
                  <ul>
                    <li v-for="i in dataList[tabIndex]">
                      <!--指南和测评-->
                      <div class="type1" v-if="i.content_type!=3" @click="jump_detail(i.id)">
                        <div class="txt">
                          <h2 class="vlc-nowrap">{{ i.title }}</h2>
                          <h3><p class="vlc-nowrap">{{ i.username }}</p><div>{{ i.publish_time | howLong }}</div></h3>
                          <p class="con vmc-nowrap-2">{{ i.introduce }}</p>
                        </div>
                        <div class="img">
                          <div class="hasVideo" v-if="i.has_radio"></div>
                          <img class="blockImg" :src="i.headimgurl">
                        </div>
                      </div>
                      <!--活动-->
                      <div class="type2" v-if="i.content_type==3" style="margin-top: 10px" @click="go(i.relation_article_id)">
                        <button class="tag" :class="{ 'red': i.status==1 }">{{ i.status | chubAcStatus }}</button>
                        <div class="left ac_default">
                          <div class="img" v-if="i.detailimgurl" :style="{backgroundImage:'url('+i.article_activity.activity_tag+')'}"></div>
                        </div>
                        <div class="right">
                          <h2 class="vlc-nowrap">{{ i.title }}</h2>
                          <h3 class="vlc-nowrap">{{ i.deputy_title }}</h3>
                          <p class="vlc-nowrap time">{{i.article_activity.activity_time_start | select_time(i.article_activity.activity_time_end) }}</p>
                          <div class="vlc-nowrap location">{{ i.article_activity.activity_address }}</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </PullDown>
          </div>

        </Slide-bar>

      </div>
   </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../cores/content-hub/list.vue';
  import navbar from '../../components/base/navbar.vue';
  export default {
    extends: js,
    components:{
      navbar
    }
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../styles/content-hub/chub.less";
  .topbanner{
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background-color: #ffffff;
  }
  .vlc-slideBar{
    height: 100%;
  }
  .vlc-slideBar-content-item{
    overflow-y: auto;
  }
  .vlc-pullDown{
    height: 100%;
  .vlc-pullDown-content{
    height: 100%;
  }
  }
  .vlc-slideBar-content-item>div{
    height:90%;
  }
</style>
